<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tableDemo</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
  <script>
    // 初始化按钮为标记1
    var selectedNumber = 1;
    // 初始化tr为3
    var rowNumber = 3;

    // 初始化btn数量
    var btnNumber = 0;

    // 声明了记录保存当前隐藏列的数据
    var statusTab;

    // 表格数据
    var arr = [
      {
        '': '1',
        id: '1001',
        name: '苹果',
        price: 2000,
      },
      {
        '': '2',
        id: '1002',
        name: '小米',
        price: 2100,
      },
      {
        '': '3',
        id: '1003',
        name: '华为',
        price: 2200,
      },
      {
        '': '4',
        id: '1004',
        name: '锤子',
        price: 2300,
      },
      {
        '': '5',
        id: '1005',
        name: '三星',
        price: 2400,
      },
      {
        '': '6',
        id: '1006',
        name: '三星',
        price: 2400,
      },
      {
        '': '7',
        id: '1007',
        name: '三星',
        price: 2400,
      },
      {
        '': '8',
        id: '1008',
        name: '三星',
        price: 2400,
      },
      {
        '': '9',
        id: '1009',
        name: '三星',
        price: 2400,
      },
      {
        '': '10',
        id: '1010',
        name: '三星',
        price: 2400,
      },
      {
        '': '11',
        id: '1011',
        name: '三星',
        price: 2400,
      },
      {
        '': '12',
        id: '1012',
        name: '三星',
        price: 2400,
      },
    ];
    //表头
    var tablehead = ['', 'id', 'name', 'price'];

    //初始化函数，创建了容纳table的body和div
    function init() {
      var body = document.body;
      var container = document.createElement('div');
      var brothderNode = document.querySelector('.btnContainer');
      container.setAttribute('class', 'table-container');
      body.insertBefore(container, brothderNode);
      return container;
    }

    //创建表格函数
    function inittable(container) {
      var table = document.createElement('table');
      table.setAttribute('cellspacing', '0');
      container.appendChild(table);
      var tr_head = document.createElement('tr');
      table.appendChild(tr_head);

      //  根据表头数量创建th,并且添加类名
      for (var i = 0; i < tablehead.length; i++) {
        var th = document.createElement('th');
        th.setAttribute('class', 'text-center');
        th.innerHTML = tablehead[i];
        tr_head.appendChild(th);
      }
      /**
        *TODO:
        **使用for循环将对象加入到table中去
        **k控制的是选取数组对象的一个范围，正确修改该值以实现分页
         **要获取到k的起始值
         **第一页1*3-3=0(遍历0,1,2)    第二页2*3-3=3(3,4,5)

         **k的初始值没有问题，k的上限应该由数组对象的长度来修改
         **数组对象的长度和每页tr数量，需要获取当前页数的上限
        */
      //  分页
      for (
        var k = selectedNumber * rowNumber - rowNumber;
        k < rowNumber * selectedNumber;
        k++
      ) {
        var tr = document.createElement('tr');
        table.appendChild(tr);
        // 按照th的数量添加列td
        if (arr[k] === undefined) {
          break;
        }
        for (var j = 0; j < tablehead.length; j++) {
          var td = document.createElement('td');
          td.setAttribute('class', 'text-center');
          // 根据属性名来获取属性值
          td.innerHTML = arr[k][tablehead[j]];
          tr.appendChild(td);
        }
      }
    }

    // 添加到DOM树上

    function createBtn() {
      /**
       *TODO:
       **创建一个btn并添加到body
       **循环创建btn
       **结合每页tr数量和arr长度来确定按钮数量
       **当(arrLength%trLength !=0) arrLength/trLength+1表示按钮的数量
       **否则arrLength/trLength即为btn数量
       */

      if (arr.length % rowNumber != 0) {
        btnNumber = arr.length / rowNumber + 1;
      } else {
        btnNumber = arr.length / rowNumber;
      }
      let tempNode = document.createElement('div');
      tempNode.setAttribute('class', 'btnContainer');
      for (let b = 0; b < btnNumber; b++) {
        let button = document.createElement('button');
        button.innerText = `${b + 1}`;
        tempNode.appendChild(button);
      }
      document.body.appendChild(tempNode);
    }

    /**
     *TODO:btn的输出的值x既是tr的数量，读取的都是从table列表的首位开始
     **每一次点击按钮的时候都需要先把原来的表格先给删除
     **理想状态是我们还需要给定一个固定的包含有多少行的数值y,x*y表示的是从开始到选定的结束，x*y-y既是我们分页所得数据
     **保证在点击按钮之后延迟生成表格
     */

    //  删除原来创建的表格,并按照页数重新创建表格
    function rebuildTable() {
      for (let i = 0; i < btnNumber; i++) {
        let selectBtn = document.querySelectorAll('button');

        selectBtn[i].addEventListener('click', (e) => {
          console.log(e);
          var childNode = document.getElementsByClassName('table-container')[0];

          var parentNode = document.body;
          parentNode.removeChild(childNode);
          console.log(e.target.innerText);
          //   更新表格的行数
          selectedNumber = e.target.innerText;
          var table = init();

          inittable(table);

          /**
           * TODO:
           * * 删除原来创建的btn,并重新绘制btn
           * *获取btnContainer的div，并调用body来删除
           * *重新调用createBtn()
           * *利用JS在同步队列当中是自上而下执行
           * *重新创建btn之后按钮的点击事件要重新获取，采用递归调用
           * ***/
          let btncontainer = document.querySelector('.btnContainer');
          document.body.removeChild(btncontainer);
          createBtn();
          rebuildTable();
          //重新获取th
          getThTags();
          // 重新获取table
          drawControl();
          // 保持列表的隐藏状态
          toogleCols(statusTab);
        });
      }
    }

    // 获取th并监听伪元素的点击事件
    function getThTags() {
      var TH = document.querySelectorAll('th');
      console.log(TH);
      for (let j = 0; j < TH.length; j++) {
        TH[j].addEventListener('click', () => {
          statusTab = j;
          toogleCols(j);
        });
      }
    }

    //   封装显隐列函数
    function toogleCols(flag) {
      // 获取table,切换按钮并对Btn添加事件
      var tab = document.getElementsByTagName('table')[0];

      // 获取表格的所有行
      var trs = tab.rows;
      for (var i = 0, len = trs.length; i < len; i++) {
        // 每一行都有一个cells包含该行的所有td
        // 对于每一行的第二列进行显影
        var cell = trs[i].cells[flag + 1];
        if (cell.style.display == 'none') {
          cell.style.display = '';
          statusTab = undefined;
        } else {
          cell.style.display = 'none';
        }
      }
    }

    // 控制表格列的拉伸
    function drawControl() {
      var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
      let table = document.querySelector('table');
      //   标题th的长度
      for (j = 0; j < table.rows[0].cells.length; j++) {
        for (k = 1; k < table.rows.length; k++) {
          //   监听每一个标题框的按下鼠标事件，cells表示每一列
          table.rows[k].cells[j].onmousedown = function () {
            //记录单元格
            tTD = this;
            if (event.offsetX > tTD.offsetWidth - 10) {
              tTD.mouseDown = true;
              tTD.oldX = event.x;
              tTD.oldWidth = tTD.offsetWidth;
            }
          };

          // 监听释放鼠标事件
          table.rows[k].cells[j].onmouseup = function () {
            //结束宽度调整
            if (tTD == undefined) tTD = this;
            tTD.mouseDown = false;
            tTD.style.cursor = 'default';
          };
          // 监听移动鼠标事件
          table.rows[k].cells[j].onmousemove = function () {
            //更改鼠标样式
            if (event.offsetX > this.offsetWidth - 10)
              this.style.cursor = 'col-resize';
            else this.style.cursor = 'default';
            //取出暂存的Table Cell
            if (tTD == undefined) tTD = this;
            //调整宽度
            if (tTD.mouseDown != null && tTD.mouseDown == true) {
              tTD.style.cursor = 'default';
              if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
                tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
              //调整列宽
              tTD.style.width = tTD.width;
              tTD.style.cursor = 'col-resize';
              //调整该列中的每个Cell
              table = tTD;
              while (table.tagName != 'TABLE') table = table.parentElement;
              for (j = 0; j < table.rows.length; j++) {
                table.rows[j].cells[tTD.cellIndex].width = tTD.width;
              }
            }
          };
        }
      }
    }

    
    var table = init();
    inittable(table);

    createBtn();

    // 分页后根据数据重新创建表格
    rebuildTable();

    // 监听表头点击事件
    getThTags();
    // 列拉伸
    drawControl();
  </script>
</html>
